use leptos::prelude::*;
use rand::Rng;

/// Starry Background Component
/// Provides a beautiful starry background with animated stars
#[component]
#[must_use]
pub fn UiStarryBackground(
    #[prop(optional)] class: Option<String>,
    children: Children,
) -> impl IntoView {
    let base = "min-h-screen relative overflow-hidden";
    let class = class.map_or_else(|| base.to_string(), |c| format!("{base} {c}"));

    // Generate random stars
    let stars = (0..200)
        .map(|_| {
            let mut rng = rand::thread_rng();
            let top = rng.gen_range(0.0..100.0);
            let left = rng.gen_range(0.0..100.0);
            let size = rng.gen_range(1..4);
            let opacity = rng.gen_range(0.2..0.9);
            let animation_delay = rng.gen_range(0.0..5.0);
            let animation_duration = rng.gen_range(2.0..5.0);

            format!(
                r#"<div class="absolute rounded-full bg-white animate-pulse" 
                 style="top: {}%; left: {}%; width: {}px; height: {}px; 
                        animation-delay: {}s; animation-duration: {}s; opacity: {};"></div>"#,
                top, left, size, size, animation_delay, animation_duration, opacity
            )
        })
        .collect::<Vec<_>>();

    let stars_html = stars.join("");

    view! {
        <div class=class style="background: #000;">
            // Starry background
            <div class="absolute inset-0 overflow-hidden" inner_html=stars_html></div>

            // Decorative halo effects
            <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                <div class="absolute w-96 h-96 rounded-full border border-blue-500/10 animate-ping"
                     style="animation-duration: 4s;"></div>
                <div class="absolute w-80 h-80 rounded-full border border-indigo-500/10 animate-ping"
                     style="animation-delay: 1s; animation-duration: 5s;"></div>
            </div>

            // Children content
            {children()}
        </div>
    }
}
